import React, { useEffect, useRef } from "react";
import APlayer from "aplayer";
import "aplayer/dist/APlayer.min.css";
import { Box } from "@mui/system";
import { ViewerCommonProps } from "../../FileViewer";
export interface ExtendAudioViewerProps extends ViewerCommonProps {
  cover?: string;
  artist?: string;
}
export default ({ onClose, src, cover, artist, fileInfo, ...otr }: ExtendAudioViewerProps) => {
  const ref = useRef(null);
  const audioInstance = useRef<any>();
  useEffect(() => {
    if (src) {
      audioInstance.current = new APlayer({
        container: ref.current,
        mini: true,
        audio: { url: src },
      });
      return () => {
        audioInstance.current?.destroy();
      };
    }
  }, [src]);
  return (
    <Box
      onClick={onClose}
      sx={{
        height: "100vh",
        display: "flex",
        width: "100%",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Box
        ref={ref}
        sx={{ transform: "scale(2.5)" }}
        onClick={(e) => {
          e.stopPropagation();
        }}
      ></Box>
    </Box>
  );
};
